<template>
	<view class="order-list">
		
		<view class="head">
			<view>客服信息列表</view>
			<view class="circle-btn">
				<text class="txt" @click="back">返</text>
			</view>
		</view>
					
		<scroll-view class="list" :scroll-y="true">
			<view class="list-item" v-for="v in orderList" :key="v.id">
				<view class="orderNo" >
					仓库名称：<text>{{ v.wareHouseName }}</text>
				</view>
				<view class="orderNo" >
					客服名称：<text>{{ v.customerServiceName }}</text>
				</view>
				<view class="orderNo" >
					客服手机号：<text>{{ v.customerServicePhone }}</text>
				</view>
				
				<view class="customerServiceVx" @tap="checkImg(v.customerServiceVx)">
					客服微信：
					<image :src="imgPrex + v.customerServiceVx" mode="aspectFit" 
					 class="small-img"></image>
				</view>
		
						
			</view>
		
		    <view v-show="!orderList.length" class="no-oders-tip">
				暂无数据
			</view>
		</scroll-view>
				
		<!-- <view class="search-box">
			<view class="search">
				<view class="search-input">
					<input v-model="keywords"  placeholder="订单号/关键字索引" placeholder-style="color: rgba(255,255,255, 0.9);" />
				</view>
				
				<view class="search-btn" @click="search">
					查询
				</view>
			</view>
		</view> -->
		
	   <view class="image-popup" v-if="showImage">
			<!-- 点击图片外部可关闭弹窗 -->
			<view class="mask" @click="showImage = false"></view>
			<!-- 实际显示的图片 -->
			<view class="customer">
				<image :src="qrcode" mode="aspectFit"></image>
			</view>
			
    </view>
	
	
	</view> 
</template>

<script>
	const imgPrex = 'https://storage.longdiankj.com/prod-api';
	import * as api from '../../utils/api.js';
	
	const senderOrderStatusMap = [
		{ label: '等待客服确认', val: 1 },
		{ label: '自寄中', val: 2 },
		{ label: '上门取件中', val: 3 },
		{ label: '订单完成', val: 4 },
		{ label: '订单取消', val: 5 },
	];
	const withdrawOrderStatusMap = [
		{ label: '等待客服确认', val: 1 },
		{ label: '自取中', val: 2 },
		{ label: '派送中', val: 3 },
		{ label: '订单完成', val: 4 },
		{ label: '订单取消', val: 5 },
	];
	
	export default {
		data() {
			return {
				imgPrex,
				senderOrderStatusMap,
				withdrawOrderStatusMap,
				showImage: false,
				qrcode: '',
				way: 0,
				keywords: null,
				formData: {
					 eltrInfo: null,
					 contact: null,
					 telephone: null,
					 doorTime: null,
				},
				relicOrderNum: 0, // 0 存物体订单
				takeOrderNum: 0, // 1 取物
				orderList: [],
				relicStatus: [], // 存物字典
				takeStaus: [],  // 取物字典
			}
		},
		computed: {  
		},
		onLoad() {			
			this.getOrderList();
			
			// this.relicStatus = JSON.parse(uni.getStorageSync('relic_status'));
			// this.takeStatus = JSON.parse(uni.getStorageSync('take_status'));
		},
		methods: {
			statusLabel (status) {
				let statusMap;
				if (this.way == 0) {
					statusMap = this.relicStatus || [];
				} else {
					statusMap = this.takeStatus || [];
				}
				
				return statusMap.find(v => v.dictValue == status)?.dictLabel;
			},
		
			async getOrderList() {


			   const res = await api.getCustomerServiceWxList();
			   this.orderList = res.data || [];
   
			},
	
			back () {
				uni.navigateBack()
			},
			search() {
				this.getOrderList();
			},
		    checkImg(customerServiceVx) {
				this.showImage = true;
				this.qrcode = this.imgPrex + customerServiceVx;
			},
			async getCustomerService (wareHouseId) {
				const defaultPng = '/static/default-avatar.jpg';
				const res = await api.getCustomerService({wareHouseId});
				this.qrcode = this.imgPrex + res.rows[0].customerServiceVx;
			},
		
			// 更新订单信息
			async updateOrder (id) {
				
			},
			myToast(msg, icon = 'none') {
				uni.showToast({
					icon: icon,
					title: msg,
					duration:2000
				})
			},
		}
	}
</script>

<style lang="scss">
  .order-list {
	  color: white;
	  padding: 40rpx 20rpx;
	  align-items: center;
	  
	  .small-img {
		  width: 100rpx;
		  height: 100rpx;
	  }
	  .circle-btn {
	  			  width: 90rpx;
	  			  height: 90rpx;
	  			  border-radius: 50%;
	  			  background-color: #e5b44d;
	  			  text-align: center;
	  			  line-height: 90rpx;
	  			  .txt {
	  				  color: black;
	  				  font-size: 22px;
	  			  }
	  }
	  .head {
		  display: flex;
		  padding: 0rpx 10rpx;
		  justify-content: space-between;
		  font-size: 46rpx;
	  }
		   
	 .list {
		 
		 .list-item {
			margin: 20rpx 0;
			padding: 26rpx 20rpx; 
			border-radius: 10rpx;
		 	background-color: #2f2f2f;
			border: 1px solid  rgba(0, 0, 0, 0.5);
			.orderNo {
				padding: 10rpx 0;
				font-size: 28rpx;
			}
			.customerServiceVx {
				display: flex;
				align-content: center;
			}
			.orderStatus {
				display: flex;
				padding: 20rpx 0;
				justify-content: center;
				align-items: center;
				
			}
			.time {
				padding: 8rpx 0; 
			}	
		 
		 }
		 .no-oders-tip {
			 padding: 50rpx;
			 font-size: 50rpx;
			 color: white;
			 text-align: center;
		 }
	 }
	 
	 
		
	  .search-box {
          margin-top: 40rpx;
		  padding: 20rpx 22rpx;
		  box-sizing: border-box;
		  
		  border-radius: 10rpx;
		  background-color: #2f2f2f;
		  .search {
		  		  display: flex;
		  		  align-items: center;
		  		  border: 1px solid rgba(255, 255, 255, 0.3);
		  		  border-radius: 30rpx;
				  padding-left: 10rpx;
		  		  .search-input {
		  			 flex: 1;
		  		  }
		  		  .search-btn {
					  display: inline-block;
		  			  padding: 0 30rpx;
		  			  border-radius: 30rpx;
		  			  background-color: #e7b34d;
		  			  color: black;
					  text-align: center;
		  			  letter-spacing: 20rpx;
		  			  font-size: 30rpx;
		  		  }
		  }
	  }  
	 
	/* 图片弹窗容器样式 */
	.image-popup {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
        display: flex;
		justify-content: center;
		align-items: center;
	    z-index: 999;
		/* 遮罩层样式 */
		.mask {
		    position: absolute;
		    top: 0;
		    left: 0;
		    width: 100%;
		    height: 100%;
		    background-color: rgba(0, 0, 0, 0.7);
		}
		.customer {
			margin: 0 auto;
			display: flex;
			gap: 20rpx;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			.customer-tip {
				color: white;
				z-index: 1000;
			}
		}
		/* 图片样式 */
		image {
			margin-top: 100rpx;
		    max-width: 80%;
		    max-height: 80%;
		    z-index: 1000;
		}
		
	}
	

  }
</style>
